<template>
  <div id="page-dialogs">
    <v-container grid-list-xl fluid>
      <v-layout row wrap>
        <v-flex lg4>
            <div slot="widget-content">
              <v-dialog v-model="dialogCardType" persistent max-width="900px">
                <v-card>
                  <v-card-title>
                     <v-flex xs9>
                      <span class="headline">添加会员卡类型</span>
                     </v-flex>
                     <v-fiex xs1>
                      <v-btn color="blue darken-1" flat >保存</v-btn>
                     </v-fiex>
                     <v-fiex xs1>
                      <v-btn color="blue darken-1" flat @click="close">取消</v-btn>
                     </v-fiex>
                  </v-card-title>
                  <v-divider></v-divider>
                    <v-container grid-list-md>
                      <v-layout wrap>
                        <v-flex xs12>
                          <v-radio-group v-model="cardType" row>
                            <v-radio
                              v-for="(colorValue, i) in [{value:'1',name:'预存充值型'}, {value:'2',name:'预存折扣型'}]"
                              :key="i"
                              :value="colorValue.value"
                              :label="colorValue.name"
                            ></v-radio>
                          </v-radio-group>
                        </v-flex>
                        <v-flex xs12 sm6 md4>
                          <v-text-field label="会员卡名称" required></v-text-field>
                        </v-flex>
                        <v-flex xs12 sm6 md4>
                          <v-text-field label="充值金现金" hint=""></v-text-field>
                        </v-flex>
                        <v-flex xs12 sm6 md4>
                          <v-text-field
                            label="充值金额"
                            hint="实际到账金额"
                            persistent-hint
                            required
                          ></v-text-field>
                        </v-flex>
                        <v-flex xs12 sm6 md4>
                          <v-radio-group v-model="validTime" row>
                            <v-radio
                              v-for="(colorValue, i) in [{value:'1',name:'长期有效'}, {value:'2',name:'短有效期'}]"
                              :key="i"
                              :value="colorValue.value"
                              :label="colorValue.name"
                            ></v-radio>
                          </v-radio-group>
                        </v-flex>
                        <v-flex xs12 sm6 md8 v-if="validTime == 1">
                        </v-flex>
                        <v-flex xs12 sm6 md4 v-if="validTime != 1">
                            <v-menu
                              class="pr-2"
                              ref="startDate"
                              lazy
                              :close-on-content-click="false"
                              transition="scale-transition"
                              offset-y
                              full-width
                              :nudge-bottom="-22"
                              max-width="290px"
                              :return-value.sync="startDate"
                          >
                              <v-text-field
                              slot="activator"
                              label="开始日期"
                              v-model="startDate"
                              prepend-icon="event"
                              readonly
                              ></v-text-field>
                              <v-date-picker v-model="startDate" locale="zh-cn" no-title scrollable  @input="$refs.startDate.save(startDate);startDateMenu = false">
                              </v-date-picker>
                          </v-menu>
                        </v-flex>
                        <v-flex xs12 sm6 md4 v-if="validTime != 1">
                          <v-menu
                            ref="endDate"
                            lazy
                            class="pr-2"
                            :close-on-content-click="false"
                            transition="scale-transition"
                            offset-y
                            full-width
                            :nudge-bottom="-22"
                            min-width="290px"
                            :return-value.sync="endDate"
                        >
                            <v-text-field
                            slot="activator"
                            label="结束日期"
                            v-model="endDate"
                            prepend-icon="event"
                            readonly
                            ></v-text-field>
                            <v-date-picker v-model="endDate"  locale="zh-cn" no-title scrollable @input="$refs.endDate.save(endDate);endDateMenu = false"></v-date-picker>
                          </v-menu>
                        </v-flex>
                        <v-flex xs2 sm2 pt-2>
                          <v-subheader class="title">适用门店</v-subheader>
                        </v-flex>
                        <v-flex xs10 sm10>
                          <v-radio-group v-model="scopeOfApplication" row>
                            <v-radio
                              v-for="(colorValue, i) in [{value:'1',name:'全部'}, {value:'2',name:'按地区选择'}]"
                              :key="i"
                              :value="colorValue.value"
                              :label="colorValue.name"
                            ></v-radio>
                          </v-radio-group>
                        </v-flex>
                        <v-flex xs3 v-if="scopeOfApplication != 1">
                          <v-select
                            v-model="province"
                            label="省"
                            item-text="country"
                            item-value="abbr"
                            single-line
                          ></v-select>
                        </v-flex>
                        <v-flex xs3 v-if="scopeOfApplication != 1">
                          <v-select
                            v-model="city"
                            label="市"
                            item-text="country"
                            item-value="abbr"
                            single-line
                          ></v-select>
                        </v-flex>
                        <v-flex xs3 v-if="scopeOfApplication != 1">
                          <v-select
                            v-model=" district"
                            label="区"
                            item-text="country"
                            item-value="abbr"
                            single-line
                          ></v-select>
                        </v-flex>
                        <v-flex xs3 v-if="scopeOfApplication != 1">
                          <v-select
                            v-model=" shop"
                            label="门店"
                            item-text="country"
                            item-value="abbr"
                            single-line
                          ></v-select>
                        </v-flex>
                        <!-- <v-flex lg12 sm12>
                          <v-text-field textarea label="备注信息">

                          </v-text-field>
                        </v-flex>    -->
                        <v-flex xs6 sm6 pt-2>
                          <v-subheader class="title">选择背景</v-subheader>
                        </v-flex>
                        <v-flex xs6 sm6 md4>
                          <v-text-field label="上传背景图"   type="file"></v-text-field>
                        </v-flex>
                        <v-container class="backdrop" fluid >
                        <v-layout row wrap>  
                        <v-flex xs6 sm6 lg6 class="pr-3 pt-2" v-for="(Item,index) in cardTypes" :key="index">
                          <v-img
                            class="white--text"
                            height="170px"
                            :src="Item.image"
                          >
                          </v-img>
                        </v-flex>
                        </v-layout>
                        </v-container>                         
                      </v-layout>
                      <v-divider class="divider"></v-divider>
                      <small>*indicates required field</small>
                    </v-container>
                  <v-card-actions>
                    
                  </v-card-actions>
                </v-card>
              </v-dialog>
            </div>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>

<script>
import Pubsub from "pubsub-js";
export default {
  props: ["dialogCardType"],
  data () {
    return {
      cardType:"1",
      validTime:"1",
      scopeOfApplication:"1",
      startDate: null,
      endDate: null,
      city:[],
      province:[],
      district:[],
      shop:[],
      cardTypes:[
        {name:"钻石卡",memberAmount:5,image:"https://cdn.vuetifyjs.com/images/cards/docks.jpg"},
        {name:"白金卡",memberAmount:7,image:"https://cdn.vuetifyjs.com/images/cards/docks.jpg"},
        {name:"黑铁卡",memberAmount:9,image:"https://cdn.vuetifyjs.com/images/cards/docks.jpg"},
        {name:"青铜卡",memberAmount:10,image:"https://cdn.vuetifyjs.com/images/cards/docks.jpg"},
        {name:"普卡",memberAmount:22,image:"https://cdn.vuetifyjs.com/images/cards/docks.jpg"},
        {name:"普卡",memberAmount:22,image:"https://cdn.vuetifyjs.com/images/cards/docks.jpg"},
        {name:"普卡",memberAmount:22,image:"https://cdn.vuetifyjs.com/images/cards/docks.jpg"},
        {name:"普卡",memberAmount:22,image:"https://cdn.vuetifyjs.com/images/cards/docks.jpg"},
      ],
    }
  },
  components: {},
  computed: {
    
  },
  methods: {
    close(){
      //发布消息
      Pubsub.publish("cancel")
    }
  }
};
</script>
<style scoped>
.backdrop {
  height: 200px;
  overflow:auto
}
.divider {
  margin:16px;
}
.title{
  padding-left: 0px
}
</style>